JavaScript 简介

xmind-01

JavaScript 介绍

知识点

  1. JavaScript 是什么？
    JavaScript 是一种运行在客户端（浏览器）的编程语言
  2. JavaScript 组成是什么？
    ECMAScript(基础语法）、web APIs（DOM、BOM)
  3. 权威网站
    JavaScript | MDN (mozilla.org)

JavaScript 是什么

Quote

JavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如 Node.js、Apache CouchDB、Adobe Acrobat 等。进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript 的动态特性包括运行时对象的构造、变量参数列表、函数变量、动态脚本创建（通过 eval）、对象内枚举（通过 for…in 和 Object 工具方法）和源代码恢复（JavaScript 函数会存储其源代码文本，可以使用 toString() 进行检索）。

JavaScript 是一种运行在客户端（浏览器）的编程语言，用于前端 Web 开发，实现人机交互效果。它可以通过添加交互性和动态功能来增强网站的用户体验。JavaScript 也可以用于服务器端编程（如 Node.js），数据库查询和移动应用程序开发。它支持面向对象、函数式和基于原型的编程范式，并且具有动态类型、自动内存管理和解释执行等特点。JavaScript 以 ECMAScript 标准为基础，同时还包括一些与浏览器相关的 API，例如 DOM（文档对象模型）和 BOM（浏览器对象模型），用于操作网页内容和浏览器窗口。

JavaScript 的作用

JavaScript 的组成

权威网站

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .pink {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <button class="pink">按钮 1</button>
    <button>按钮 2</button>
    <button>按钮 3</button>
    <button>按钮 4</button>

    <script>
      let bts = document.querySelectorAll("button");
      bts.forEach((item, index) => {
        item.addEventListener("click", function () {
          console.log(index);
          document.querySelector("button.pink").classList.remove("pink");
          this.classList.add("pink");
        });
      });
    </script>
  </body>
</html>

JavaScript 书写位置

知识点

  1. JavaScript 三种书写位置？
    内部、外部、行内
  2. 书写的位置尽量写到文档末尾 </body> 前面
  3. 外部 js 标签中间不要写代码，否则会被忽略

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中。

内部方式

直接写在 html 文件里，通过 <script> 标签包裹 JavaScript 代码。

<!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
<script>
  alert("嗨，欢迎来传智播学习前端技术！");
</script>
注意事项

  • 我们将 <script> 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。
  • 如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
  • 因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。

外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script> 标签的 src 属性引入。

<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>

document.write("嗨，欢迎来传智播学习前端技术！");
注意事项

  1. 如果 <script> 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！

    <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
  // 此处的代码会被忽略掉！！！！
  alert(666);
</script>

  2. 外部 JavaScript 会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

内联方式

JS 代码直接嵌入到 HTML 标签中（此处作为了解即可，但是后面 vue 框架会用这种模式）。

<button onclick="alert('Hello World!')">Click me</button>

JavaScript 的注释

知识点

  1. JavaScript 注释有那两种方式？
    单行注释 //
    多行注释 /* */

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：单行注释和多行注释。

单行注释

使用 // 开头，表示从该符号后到行末都是注释内容。

// 这是一个单行注释
var x = 10; // 这是另一个单行注释
document.write("嗨，欢迎来传智播学习前端技术！");

多行注释

使用 /* 开始，使用 */ 结束，表示这段注释内的所有内容都被视为注释。

/* 这是一个
多行注释 */
var y = 20; /*
这个变量定义也在
多行注释内
*/
VSCode 中的快捷键

  • 单行注释的快捷键为 ctrl + /
  • 多行注释的快捷键为 shift + alt + A

注意事项

  • 在单行注释中不能换行，否则换行后的内容将不会被注释掉。
  • 在多行注释中，可以任意换行，注释内容会一直到结束标记才会结束。

JavaScript 的结束符

知识点

  1. JavaScript 结束符注意点结束符是？
    英文分号 ;
  2. 结束符可以省略吗？
    可以省略。但为了风格统一，结束符要么每句都写，要么每句都不写

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

<script>
  alert(1);
  alert(2);
  alert(1);
  alert(2);
</script>
实际情况

  • 实际开发中，可写可不写。许多人主张书写 JavaScript 代码时省略结束符 ;, 因为浏览器 (JavaScript 引擎) 可以自动推断语句的结束位置。

  • 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）。

输入和输出语法

知识点

  1. JavaScript 输入输出语句？
    输入：prompt(）
    输出：alert()、document.write()、console.log()

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

以数字为例，向 alert() 或 document.write() 或 console.log() 输入任意数字，他都会以弹窗形式展示（输出）给用户。

// 1. 输入的任意数字，都会以弹窗形式展示
document.write("要输出的内容");
console.log("要输出的内容");
alert("要输出的内容");

输入

prompt() ：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
prompt("请输入您的姓名：");

JavaScript 代码执行顺序